<template>
  <div>
    <div style="width: 5%;float: left;padding: 5px 8px">
      <el-avatar size="large" :src="comment.avatarUrl"/>
    </div>
    <div style="">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <div style="display: flex;justify-content: space-between">
            <span>{{ comment.username }}</span>
            <el-popover
              placement="top-start"
              :title="'回复  '+comment.username"
              width="200"
              trigger="click"
            >
              <el-input v-model="reply.content" :placeholder="comment.content"/>
              <el-button @click="submitReplay(comment.commentId)">提交回复</el-button>
              <el-button slot="reference" type="primary" icon="el-icon-edit">回复</el-button>
            </el-popover>
          </div>
          <p style="font-size: 11px;color: #475669">{{ comment.commentTime }}</p>
          <p style="font-size: 13px">Microsoft Edge 105.0.1300.0 &nbsp Window10 x64 Edition</p>
        </div>
        <div class="text item">
          <p style="line-height: 1.45;font-size: small" v-html="comment.content"></p>
        </div>
        <!--回复-->

        <div v-if="comment.childComments.length>0"  class="reply" style="background-color: #abb8c3">
          <!--              回复部分-->
          <i class="el-icon-caret-top"/>
          <BaseCommentDetail :file-id="fileId"
                             v-for="(reply,index) in comment.childComments"
                             :comment="reply"
                             :key="index">
          </BaseCommentDetail>
        </div>

      </el-card>
    </div>
  </div>
</template>
<script>
import {saveComment} from "@//assets/http/request";

export default {
  name: 'BaseCommentDetail',
  props: {
    comment: {
      type: Object,
      default: () => {
      }
    },
    fileId: {
      type: Number,
      default: () => {
      }
    },
    updateComment:{
      type:Function,
      default:()=>{}
    }
  },
  data() {
    return {
      reply: {
        //评论内容
        content: '',
        //用户id
        userId: '',
        //文件id
        fileId: '',
        //父级
        parentId: -1
      }
    }
  },
  methods: {
    submitReplay(commentId) {
      console.log("回复id", commentId)
      console.log("文件id", this.fileId);
      this.reply.userId = JSON.parse(localStorage.getItem("USER")).id;
      this.reply.fileId = this.fileId;
      this.reply.parentId = commentId;
      saveComment(this.reply).then(res=>{
        if (res.data.code===200){
          this.$message({
            type:'success',
            message:'你的回复已经提交,敌军还有三秒到达战场'
          });
          this.$bus.$emit('updateCommentList');
        }
      });
    }
  }
}
</script>
<style scoped>

ul > li {
  list-style-type: none; /* 先去除小圆点 */
}

.collection span {
  margin: 2px 10px;
}

a {
  color: green;
}
</style>
